
@extends('Home.common.header')

<!-- 1.添加meta csrf_token -->
<meta name="csrf-token" content="{{ csrf_token() }}"> 
<link href="{{ asset('/css/cart.css') }} " rel="stylesheet">
<script src=" {{ asset('/js/jquery-1.8.3.min.js') }} "></script>
<script type="text/javascript" >
	<!-- 2.设置全局ajax选项 -->
	$.ajaxSetup({
		headers: {
			'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
		}
	});
	var _token = $('meta[name="csrf-token"]').attr('content');
	
	// 增加数量 并重新计算价格
	function addNum( com_id )
	{
		// 获取输入框内 的数量
		var saleNum = parseInt( $("input[com_id="+com_id+"]").val() );
		// 加1
		saleNum++;
		// 获取sku的库存
		var stock = parseInt( $("input[com_id="+com_id+"]").attr('stock') );
		// 大于库存
		if( saleNum > stock )
		{
			alert('土豪！ 只能买这么多了');
			return false;
		}
		// 1.设置 购买数量
		$("input[com_id="+com_id+"]").val( saleNum );
		// 单价
		var oneSale = parseFloat( $("#salePrice_"+com_id).attr('price') );
		// 2.设置 商品小计
		var smallTotal = saleNum*oneSale;
		$("#small_total_"+com_id).html("￥<b>"+smallTotal.toFixed(2)+"</b>");
		// 3.设置 订单总价
		setTotalPrice();
		
		// 商品数量加1
		$.ajax({
			type:"post",
			url:"{{ url('/insertCart') }}",
			data:{id:com_id,num:1,_token:_token},
			async:false,    					
			dataType:"html",
			success:function(back){
				if( back!='' ){
					location.reload();
				}
			}
		});
		
	}
	
	// 减少数量 并重新计算价格
	function delNum( com_id )
	{
		// 获取输入框里的数量
		var saleNum = parseInt( $("input[com_id="+com_id+"]").val() );
		// 减1
		saleNum--;
		if( saleNum<1 )
		{
			alert('客官 不能再减了');
			return false;
		}
		// 1.设置 购买数量
		$("input[com_id="+com_id+"]").val( saleNum );
		// 单价
		var oneSale = parseFloat( $("#salePrice_"+com_id).attr('price') );
		// 2.设置 商品小计
		var smallTotal = saleNum*oneSale;
		$("#small_total_"+com_id).html("￥<b>"+smallTotal.toFixed(2)+"</b>");
		// 3.设置 订单总价
		setTotalPrice();
		// 商品数量减1
		$.ajax({
			type:"post",
			url:"{{ url('/insertCart') }}"+'/del',
			data:{id:com_id,num:'-1',_token:_token},
			async:false,    					
			dataType:"html",
			success:function(back){
				if( back!='' ){
					location.reload();
				}
			}
		});
	}
	
	// 订单总价
	function setTotalPrice()
	{
		// 初始化 总价 0
		var need_to_pay = 0;
		// 每个商品的小计 集合对象 b标签包裹的就是小计
		var totalObj = document.getElementsByTagName('b');
		for (var i=0;i<totalObj.length;i++)
		{
			// 算出总价
			need_to_pay += parseFloat( totalObj[i].innerText );
		}
		// 保留2位小数
		var finall = need_to_pay.toFixed(2);
		// 设置总价 
		var obj = document.getElementById('need_to_pay');
		// 购物车为空的时候 这样写防止代码报错
		if( obj!=null )
		{
			obj.innerHTML = finall ;
		}
		
	}
	
	// 购物车里 删除商品
	function delCart( com_id='' )
	{
		if( confirm('客官 确认删除您心爱的商品吗??') )
		{
			var tr = document.getElementById("tr_"+com_id);
			// 移除
			tr.remove();
			// 重新计算总价
			setTotalPrice();
			// 删除此商品
			$.ajax({
				type:"post",
				url:"{{ url('/delCart') }}",
				data:{id:com_id,_token:_token},
				async:false,    					
				dataType:"html",
				success:function(back){
					if( back!='' ){
						location.reload();
					}
				}
			});
		}
		
	}
	
	// 清空 购物车
	function delAll()
	{
		if( confirm('客官 确定您的操作吗??') )
		{
			$.ajax({
				type:"post",
				url:"{{ url('/delAll') }}",
				data:{_token:_token},
				async:false,    					
				dataType:"html",
				success:function(back){
					if( back!='' ){
						location.reload();
					}
				}
			});
		}
		
	}
	
</script>	

<br/><br/><br/>
<div style="width:85%;" class="container" >
	
	<div style="padding: 24px 0 12px 0;">
		<span class="the_title1">我的购物车</span>
	</div>
	<?php
		// 商品不为空 才有清空按钮
		if( !empty($coms_info) )
		{
	?>
		<div style="">
			<a class="the_title1" style="font-size:15px;cursor:pointer;" onclick="delAll();" >
				清空购物车
			</a>
		</div>
	<?php
		}
	?>
	
	
	<!-- 购物车表单 -->
	<table class="table-goods">
		<thead>
			<tr >
				<th style="padding: 8px 0;width:20%;">商品</th>
				<th>&nbsp;</th>
				<th>价格</th>
				<th>数量</th>
				<th>小计</th>
				<th></th>
			</tr>
		</thead>
		
		<tbody>
		
		@forelse($coms_info as $key => $com_info)
		
			
			<!-- 商品模板 -->
			<tr id="tr_{{ $com_info->id }}" >
				<td class="tbody-images" style="width:130px;">
					<!-- 商品图片 -->
					<a href="{{ url('/comDetail') }}/{{ $com_info->id }}">
						<img class="tbody-img" src="{{ asset('/images/coms') }}/{{ $com_info->pic_url }}" style="width:130px;" >
					</a>
				</td>
				<td class="tbody-title" style="width:28%;">
					<a style="text-decoration: none;" href="">{{ $com_info->name }}</a>
					<br>
					<p></p>
				</td>
				
				<!-- 商品售价 -->
				<td style="color:#44A8F2;border-top: 1px solid #DCDCDC;width:150px;" id="salePrice_{{ $com_info->id }}" price="{{ $com_info->price }}"  >
					￥{{ $com_info->price }}
				</td>
				
				<td class="tbody-title" style="width:15%;">
					<div style="">
						
						<!-- + -->
						<button onclick="addNum({{ $com_info->id }});" class="glyphicon glyphicon-plus" aria-hidden="true" style="float:left;margin-top:10px;background:rgba(0,0,0,0);border:0px solid red;margin-right:10px;"></button>
							
						<input com_id="{{ $com_info->id }}" stock="{{ $com_info->stock }}" style="width:50px;text-align:center;float:left;" class="form-control"  type="text" value='{{ $nums[$com_info->id] }}' />
						
						<!-- - -->
						<button onclick="delNum({{ $com_info->id }});"  class="glyphicon glyphicon-minus" aria-hidden="true" style="float:left;margin-top:10px;margin-left:10px;background:rgba(0,0,0,0);border:0px solid red;"></button>
						
					</div>
				</td>
				
				<!-- 小计 -->
				<td class="tbody-title" id="small_total_{{ $com_info->id }}" style="width:13%;" >
					￥<b>{{ $com_info->price }}</b>
				</td>
				
				<!-- 删除 -->
				<td class="tbody-title">
					<a onclick="delCart({{ $com_info->id }});" style="cursor:pointer;">
						<span class="glyphicon glyphicon-trash"></span>
					</a>
				</td>
			</tr>
			<script type="text/javascript" >	
	
				$(function(){
					
					// 数量输入框 失去焦点 判断
					$("input[com_id="+{{ $com_info->id }}+"]").blur(function(){
						// 获取sku的库存
						var stock = parseInt( $(this).attr('stock') );
						// 购买量
						var saleNum = $(this).val();
						// 不是数字
						if( isNaN(saleNum) )
						{
							saleNum=1;
						}
						// 浮点数 转整
						var saleNum = parseInt( saleNum );
						if( saleNum<1 )
						{
							saleNum = 1;
							$(this).val(saleNum);
							// 单价
							var oneSale = $("#salePrice_"+{{ $com_info->id }}).attr('price');
							// 2.商品小计
							var smallTotal = saleNum*oneSale;
							$("#small_total_"+{{ $com_info->id }}).html("￥<b>"+smallTotal.toFixed(2)+"</b>");
							// 计算总价
							setTotalPrice();
							alert('客官 至少选择一件啊');
							return false;
						}
						// 大于 库存
						if( saleNum > stock )
						{
							// 等于最大库存
							saleNum = stock;
						}
						
						// 1.设置 购买量
						$(this).val(saleNum);
						// 单价
						var oneSale = $("#salePrice_"+{{ $com_info->id }}).attr('price');
						// 2.商品小计
						var smallTotal = saleNum*oneSale;
						$("#small_total_"+{{ $com_info->id }}).html("￥<b>"+smallTotal.toFixed(2)+"</b>");
						// 计算总价
						setTotalPrice();
						// 修改购物车
						$.ajax({
							type:"post",
							url:"{{ url('/updateCart') }}",
							data:{id:{{ $com_info->id }},num:saleNum,_token:_token},
							async:false,    					
							dataType:"html",
							success:function(back){
								if( back!='' ){
									location.reload();
								}
							}
						});
						
					});
					
					// 分别计算每个商品的小计
					// 1. 购买量
					var saleNum = parseInt( $("input[com_id="+{{ $com_info->id }}+"]").val() );
					// 单价
					var oneSale = $("#salePrice_"+{{ $com_info->id }}).attr('price');
					// 2. 商品小计
					var smallTotal = saleNum*oneSale;
					$("#small_total_"+{{ $com_info->id }}).html("￥<b>"+smallTotal.toFixed(2)+"</b>");
				})
			</script>
			@empty
				<tr>
					<td class="tbody-title">
						<h2>购物车为空</h2>
					</td>
					<td class="tbody-title"></td>
					<td class="tbody-title"></td>
					<td class="tbody-title"></td>
					<td class="tbody-title"></td>
					<td class="tbody-title"></td>
				</tr>
			@endforelse	
			
		</tbody>
		
	</table>

	<?php
		// 不为空才有结算按钮
		if( !empty($coms_info) )
		{
	?>
		<!-- 总计 -->
		<div  style="border-top: 1px solid #DCDCDC;">
			<div style="width:20%;height:80px;margin-left:75%;"  >
				<div style="padding:30px 0;">
					总计（不包括运费） : &nbsp; 
					¥<strong id="need_to_pay">1198.00</strong>
				</div>
			</div>
		</div>
		
		<!-- 结算按钮 -->
		<div style="border-top: 1px solid #DCDCDC;">
			<a style="width:200px;background-color:#0099E6;margin-top:2%;float:right;margin-right:7%;"  class="btn btn-primary btn-lg" href="{{ url('/goToPay') }}" >
				去结算
			</a>
		</div>
	<?php
		}
	?>
		
	
	
	
	
</div>
<script>
	
	$(function(){

		// 页面一进来 最后加载
		// 订单总价
		setTotalPrice();
		
	})
	
</script>	


@extends('Home.common.footer')